<!doctype html>
<html lang="en">
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZLGVJTEW5V"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-ZLGVJTEW5V");
    </script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>React Spinners</title>
    <meta name="title" content="React Spinners" />
    <meta name="description" content="A collection of react loading spinners" />
    <!-- SEO Meta Tags -->
    <meta
      name="keywords"
      content="react, loading spinners, react components, loading animations, react-spinners, javascript, npm package"
    />
    <meta name="author" content="David Hu" />
    <meta name="robots" content="index, follow" />
    <meta property="og:title" content="React Spinners" />
    <meta property="og:description" content="A collection of react loading spinners" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.davidhu.io/react-spinners/" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="React Spinners" />
    <meta name="twitter:description" content="A collection of react loading spinners" />

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

    <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="preload" />
  </head>

  <body>
    <header id="header">
      <h1 class="logo">React Spinners</h1>

      <h2 class="author">by <a href="https://www.davidhu.io">David Hu</a></h2>
    </header>

    <main id="main">
      <div class="installation">
        <code id="code">yarn add react-spinners</code>
      </div>

      <div id="root">
        <div class="spinner-container">
          <div class="spinner-item">
            <a href="#" class="spinner-title">Loading</a>
          </div>
          <div class="spinner-item">
            <a href="#" class="spinner-title">Loading</a>
          </div>
          <div class="spinner-item">
            <a href="#" class="spinner-title">Loading</a>
          </div>
          <div class="spinner-item">
            <a href="#" class="spinner-title">Loading</a>
          </div>
          <div class="spinner-item">
            <a href="#" class="spinner-title">Loading</a>
          </div>
          <div class="spinner-item">
            <a href="#" class="spinner-title">Loading</a>
          </div>
        </div>
      </div>
      <script type="module" src="./index.tsx"></script>
    </main>

    <footer>
      <a href="https://github.com/davidhu2000/react-spinners">Github Repo</a>
      <a href="https://www.davidhu.io/blog">Personal Blog</a>
      <a href="https://magichour.ai">My Company</a>
    </footer>

    <span id="forkongithub">
      <a href="https://github.com/davidhu2000/react-spinners">Fork me on GitHub</a>
    </span>
  </body>
</html>
